<template>
    <ul class="layui-nav layui-nav-tree layui-inline" lay-filter="user">
<!--      <li class="layui-nav-item">
        <router-link to="/home">
          <i class="layui-icon">&#xe609;</i>
          我的主页
        </router-link>
      </li>-->
      <li class="layui-nav-item" :class="showName == 'index' ? tabClass : ''">
        <a @click="showTab('index')">
          <i class="layui-icon">&#xe612;</i>
          用户中心
        </a>
      </li>
      <li class="layui-nav-item" :class="showName == 'password' ? tabClass : ''">
        <a @click="showTab('password')">
          <i class="layui-icon">&#xe620;</i>
          修改密码
        </a>
      </li>
      <li class="layui-nav-item" :class="showName == 'message' ? tabClass : ''">
        <a @click="showTab('message')">
          <i class="layui-icon">&#xe611;</i>
          我的消息
        </a>
      </li>
    </ul>

</template>

<script>
export default {
  name: 'UserLeft',
  data () {
    return {
      showName: 'index',
      tabClass: 'layui-this'
    }
  },
  methods: {
    showTab: function (tab) {
      this.showName = tab
      this.$emit('showContent', tab)
    }
  }
}
</script>